<template>
  <div class="container">
    <div class="main-content">
      <a-tabs v-model:active-key="activeKey">
        <a-tab-pane key="suggestion" title="处置建议">
          <Suggestion :current-tab-key="activeKey" :switch-tab-func="switchTabFunc" v-if="activeKey === 'suggestion'" />
        </a-tab-pane>
        <a-tab-pane key="warning" title="异常预警">
          <Warning :switch-tab-func="switchTabFunc" v-if="activeKey === 'warning'" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Suggestion from './components/suggestion.vue'
import Warning from './components/warning.vue'
const switchTabFunc = (key) => {
  activeKey.value = key
}
const activeKey = ref('suggestion')
</script>

<style lang="less" scoped>
.lookBtn {
  color: #1d68d0;
}
.modelCont {
  width: 860px;
}
.btnBox {
  display: flex;
  div {
    margin-right: 10px;
    cursor: pointer;
  }
}
.container {
  display: flex;
  min-height: calc(100vh - 56px);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
</style>
